<template>
  <div class="page">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <div class="page-footer" v-show="panel!=''">
      <router-link :to="'/main/news'" :class="{'active': panel=='news','news':true}"><img :src="news_src"><br>首页</router-link>
      <router-link :to="'/main/cate'" :class="{'active': panel=='cate','cate':true}"><img :src="sub_src"><br>杂谈</router-link>
      <router-link :to="'/main/me'" :class="{'active': panel=='me','me':true}"><img :src="me_src"><br>导航</router-link>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data: function(){
    return {
      panel : "",
      transitionName : "",
    }
  },
  computed: {
    news_src: function(){
        if(this.panel=='news')
        {
          return '8_icon_news_blue.png';
        }
        else
        {
          return '8_icon_news_grey.png';
        }
    },
    sub_src: function(){
      if(this.panel=='cate')
      {
        return '9_icon_order_blue.png';
      }
      else
      {
        return '9_icon_order_grey.png';
      }
    },
    me_src: function(){
      if(this.panel=='me')
      {
        return '10_icon_me_blue.png';
      }
      else
      {
        return '10_icon_me_grey.png';
      }
    }
  },
  mounted: function() {
      this.pathUpdate(this.$route.path);
  },
  methods: {
    pathUpdate: function(toPath, fromPath = ''){
      var toArr = toPath.split('/');
      var fromArr = fromPath.split('/');
      // Update Current Panel 
      this.panel = toArr.hasOwnProperty(2) ? toArr[2] : 'news';
      // 判断是否是文章正文
      if (toArr.hasOwnProperty(3)){
          this.panel = '';
          this.transitionName = 'slide-fade';
      }
      // 如果是内页返回
      if (fromArr.hasOwnProperty(3) && toArr.hasOwnProperty(2) && !toArr.hasOwnProperty(3)){
          this.transitionName = 'slide-right';
      }
      // 如果是外页间互相切换
      if (fromArr.hasOwnProperty(2) && !fromArr.hasOwnProperty(3) && toArr.hasOwnProperty(2) && !toArr.hasOwnProperty(3)){
          this.transitionName = '';
      }
      // 如果是内内页返回内页
      if (fromArr.hasOwnProperty(4) && toArr.hasOwnProperty(3) && !toArr.hasOwnProperty(4)){
          this.transitionName = 'slide-right';
      }
    }
  },
  watch: {
    '$route' (to, from) {
      this.pathUpdate(to.path, from.path);
    }
  }
}
</script>
<style lang="postcss">
.page{
  font-size:0.16rem;
  line-height: 0.21rem;
  font-weight: 500;
  background-color: #fff;
}
.page-head{
  line-height: 0.4rem;
  height: 0.4rem;
  width: 100%;
  text-align: center;
  padding: 0.07rem 0 0.02rem 0;
  border-bottom: 0.005rem solid #E2E4E6;
  span{
    padding-left: 0.31rem;
  }
  .img-wrapper{
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
    img{
        /*vertical-align:middle;*/
        padding-top:0.12rem;
        display:inline-block;
        padding-right: 0.15rem;
        width: 0.16rem;
    }
  }
}
.page-footer{
  background-color: #fff;
  font-weight: 400;
  position: fixed;
  width: 100%;
  left: 0;
  height:0.50rem;
  bottom:0;
  text-align: center;
  border-top: 0.005rem solid #E2E4E6;
  font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', Ubuntu, 'segoe ui', arial, sans-serif;
  .active{
    color:#333333;
  }
  a{
    font-size: 0.11rem;
    position: static;
    display: inline-block;
    line-height: 0.13rem;
    margin-top:0.07rem;
    width: 20%;
    text-decoration: none;
    color:#A5A5A5;
    img {
      width: 0.24rem;
    }
  }
}
.page-footer span:first-child{
  width: 30%;
}
.page-footer span:last-child{
  width: 30%;
}
</style>